import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Radio, Modal, Cascader, Row, Col, DatePicker , Select} from 'antd'
import moment from 'moment';
import Toggles from '../../components/Toggles';
const RangePicker = DatePicker.RangePicker;
const RadioGroup = Radio.Group;
const FormItem = Form.Item
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
  colon:false
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
    ta.reimbursementRatio = data.reimbursementRatio && data.reimbursementRatio[0]
      data.id=item.id
      data.detailId=item.detailId
      data.operator='admin'
      onOk(data)
    })
  }
  //补0操作
  function getzf(num){
     if(parseInt(num) < 10){
         num = '0'+num;
     }
     return num;
   }
  function getMyDate(str){
              var oDate = new Date(str),
              oYear = oDate.getFullYear(),
              oMonth = oDate.getMonth()+1,
              oDay = oDate.getDate(),
              oHour = oDate.getHours(),
              oMin = oDate.getMinutes(),
              oSen = oDate.getSeconds(),
              oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
              return oTime;
          };
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  return (
    <Modal
      {...modalOpts}
      style={{minWidth:'600px'}}
      width='60vw'
    >
      <div
        style={{height:'60vh',overflow:'auto'}}
      >
        <Form
          layout="horizontal"
        >
          <Toggles name='用户'>
            <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='名字'>
                  {
                    getFieldDecorator('name', {
                      rules: [{
                         required: true , message:'不能为空 !',
                         },
                      ],
                      initialValue: item.name,

                   })
                       (
                        <Input size='large' />
                       )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='年龄'>
                  {
                    getFieldDecorator('age',{
                      initialValue: item.age,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='用户' >
                    {
                      getFieldDecorator('username', {
                        initialValue: item.username,
                      })
                        (
                          <Input size='large' />
                        )
                   }
                </FormItem>
              </Col>
              </Row>
              <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='密码'>
                  {
                    getFieldDecorator('password', {
                      initialValue: item.password,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='销售'>
                  {
                    getFieldDecorator('market', {
                      initialValue: item.market,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='公司网址'>
                  {
                    getFieldDecorator('companyWebsite', {
                      initialValue: item.companyWebsite,
                    })
                      (
                        <Input size='large'/>
                      )
                  }
                </FormItem>
              </Col>
              </Row>
              <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='注册地址'>
                  {
                    getFieldDecorator('registeredAddress', {
                      initialValue: item.registeredAddress,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              </Row>
              <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='EMAIL'>
                  {
                    getFieldDecorator('email', {
                      initialValue: item.email,
                    })
                      (
                        <Input size='large'/>
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='分公司'>
                  {
                    getFieldDecorator('branchOfficeId_xx', {
                      initialValue: item.branchOfficeId,
                    })
                      (
                        <Input size='large' />
                      )
                  }
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem {...formItemLayout} label='备注'>
                  {
                    getFieldDecorator('remark', {
                      initialValue: item.remark,
                    })
                      (
                        <TextArea  rows={1} />
                      )
                  }
                </FormItem>
              </Col>
            </Row>
          </Toggles>
          <Toggles name='其他信息'>
            <Row>
              <Col span={8}>
                <FormItem {...formItemLayout} label='CEO姓名'>
                  {getFieldDecorator('ceoName', {
                    initialValue: item.ceoName
                   })
                      (
                        <Input size='large' />
                      )
                 }
               </FormItem>
             </Col>
             <Col span={8}>
               <FormItem {...formItemLayout} label='CEO英文名'>
                 {getFieldDecorator('ceoEname', {
                   initialValue: item.ceoEname
                  })
                     (
                       <Input size='large' />
                     )
                }
              </FormItem>
            </Col>
             </Row>
             <Row>
             <Col span={8}>
               <FormItem {...formItemLayout} label='CEO生日'>
                 {getFieldDecorator('ceoBirth', {
                   initialValue:item.ceoBirth ? moment(getMyDate(item.ceoBirth), 'YYYY-MM-DD') : '',
                 })(<DatePicker size='large' placeholder='' style={{width:'100%'}}/>)
               }
               </FormItem>
             </Col>
            </Row>
            <Row>
            <Col span={8}>
              <FormItem {...formItemLayout} label='营业范围'>
                {getFieldDecorator('businessScope', {
                  initialValue: item.businessScope
                 })
                    (
                      <Input size='large' />
                    )
                 }
               </FormItem>
             </Col>
             <Col span={8}>
               <FormItem {...formItemLayout} label='客户情况简介'>
                 {getFieldDecorator('customerProfile', {
                   initialValue: item.customerProfile
                  })
                     (
                       <Input size='large' />
                     )
                 }
               </FormItem>
             </Col>
             </Row>
             <Row>
             <Col span={8}>
                <FormItem {...formItemLayout} label='是否有不良记录'>
                  {getFieldDecorator('isBadRecord', {
                    initialValue: item.isBadRecord ? String(item.isBadRecord): null,
                   })
                      (
                          <Select placeholder='请选择' size='large'>
                            <Select.Option value='1'>是</Select.Option>
                            <Select.Option value='0'>否</Select.Option>
                          </Select>
                      )
                 }
               </FormItem>
             </Col>
             <Col span={8}>
               <FormItem {...formItemLayout} label='组织机构代码'>
                 {getFieldDecorator('organizationCode', {
                   initialValue: item.organizationCode
                  })
                     (
                       <Input size='large' />
                     )
                }
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem {...formItemLayout} label='开户行（英文）'>
                {getFieldDecorator('depositBank', {
                  initialValue: item.depositBank
                 })
                    (
                      <Input size='large' />
                    )
                 }
               </FormItem>
             </Col>
            </Row>
          </Toggles>
        </Form>
      </div>
    </Modal>

  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
